*{
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
  }
  :root{
  --primary-green:#4a7e07;
  --dark-green:#1a2f19;
  --olive:#79835B;
  --sand:#AFAB7E;
  --sage:#CBD0BE;
  --light-bg:#F3F4E8;
}
  :root {
        --primary-teal: #017033;
        --accent-cyan: #40c4cc;
        --text-dark: #333;
        --text-muted: #666;
        --border-light: #e0e0e0;
        --nav-height: 70px;
      }


      :root{
  --navbar-1: #F0F3FA;
  --soft-2: #D5DEEF;
  --soft-3: #B1C9EF;
  --soft-4: #8AAEE0;
  --soft-5: #638ECB;
  --soft-6: #395886;
}
:root{
  --ui-1: #0A1931;
  --nabar: #B3CFE5;
  --ui-3: #4A7FA7;
  --ui-4: #1A3D63;
  --ui-5: #F6FAFD;
}
:root{
  --ocean-1: #001D39;
  --ocean-2: #0A4174;
  --ocean-3: #49769F;
  --ocean-4: #4E8EA2;
  --ocean-5: #6EA2B3;
  --ocean-6: #7BBDE8;
  --ocean-7: #BDD8E9;
}
:root{
  --luna-1: #A7EBF2;
  --luna-2: #54ACBF;
  --luna-3: #26658C;
  --luna-4: #023859;
  --luna-5: #011C40;
}
:root{
  --forest-1: #051F20;
  --forest-2: #0B2B26;
  --forest-3: #163832;
  --forest-4: #235347;
  --forest-5: #8EB69B;
  --forest-6: #DAF1DE;
}
:root{
  --warm-1: #0D1D25;
  --warm-2: #104C64;
  --warm-3: #C6C6D0;
  --warm-4: #D59D80;
  --warm-5: #C0754D;
  --warm-6: #B6410F;
}
body{
    background:var(--sage);
        background: #F6FAFD;
        margin: 0;
        max-width: 100%;
      
        
      }


.navbar{
    position:sticky; 
    top:0;
    z-index:100;
    background:var(--navbar-1);
    box-shadow:0 2px 8px rgba(0,0,0,0.8)}
.container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:100%;
    margin:auto;
    padding:0.2rem 3rem}

.logo{
    width: 200px;
}


.nav-links{
    display:flex;
    gap:1.5rem;
    transition:all 0.3s ease;
  }
.nav-links a{
    font-size: 20px;
    text-decoration:none;
    color: #003333;
    font-weight:900;
    position:relative;
    padding:5px 0;
  }
.nav-links a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--luna-3);
    transition:0.3s}
.nav-links a:hover{
    color:var(--luna-3)}
.nav-links a:hover::after,.nav-links a.active::after{
    width:100%}
.nav-links a.active{
    color:var(--luna-4)}


.menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:26px;
    height:18px;
    background:none;
    border:none;
    cursor:pointer}
.menu-toggle .bar{
    width:100%;
    height:3px;
    background:var(--dark-green);
    border-radius:2px;
    transition:0.3s}
.menu-toggle.active .bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-toggle.active .bar:nth-child(2){opacity:0}
.menu-toggle.active .bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}


@media(max-width:1165px){
.menu-toggle{
    display:flex}
.nav-links{
    position:absolute;
    top:80px;
    left:0;
    width:100%;
   background: var(--navbar-1);
    flex-direction:column;
    align-items:center;
    max-height:0;
    overflow:hidden;
    border-top: 3px solid rgba(0, 0, 0, 0.1);
   }
.nav-links.open{
    max-height:480px;
    padding:1rem 0;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);}
.nav-links a{
    color:#003333;
    padding:0.4rem 0;
    width:100%;
    text-align:center}
}

       /* --- Footer Styling --- */
      footer {
        background-color: #222;
        color: #fff;
        padding: 60px 5% 30px;
        font-family: "Open Sans", sans-serif;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 40px;
        max-width: 1140px;
        margin: 0 auto;
      }

      .footer-col h4 {
        color: var(--accent-cyan);
        text-transform: uppercase;
        font-size: 16px;
        margin-bottom: 25px;
        letter-spacing: 1px;
      }

      .footer-col p {
        font-size: 14px;
        line-height: 1.8;
        color: #ccc;
      }

      .footer-links {
        list-style: none;
        padding: 0;
      }

      .footer-links li {
        margin-bottom: 12px;
      }

      .footer-links a {
        color: #ccc;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s;
      }

      .footer-links a:hover {
        color: var(--accent-cyan);
        padding-left: 5px;
      }

      .social-icons {
        display: flex;
        gap: 15px;
        margin-top: 20px;
      }

      .social-icons a {
        width: 35px;
        height: 35px;
        background: #444;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        text-decoration: none;
        transition: 0.3s;
      }

      .social-icons a:hover {
        background: var(--primary-teal);
      }

      .footer-bottom {
        text-align: center;
        margin-top: 50px;
        padding-top: 20px;
        border-top: 1px solid #444;
        font-size: 13px;
        color: #777;
      }

      /* --- Desktop Footer (Default) --- */
      footer {
        background-color: #222;
        color: #fff;
        padding: 60px 5% 30px;
        text-align: left; /* Default alignment for wide screens */
      }

      .footer-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; /* Spreads columns apart on desktop */
        max-width: 1140px;
        margin: 0 auto;
        gap: 40px;
      }

      .footer-col {
        flex: 1;
        min-width: 250px;
      }

      /* --- Mobile & Tablet Footer (Responsive Centering) --- */
      @media (max-width: 768px) {
        .footer-grid {
          flex-direction: column; /* Stacks columns vertically */
          align-items: center; /* Centers the column containers */
          text-align: center; /* Centers all text, headings, and paragraphs */
        }

        .footer-col {
          width: 100%; /* Ensures columns take full width to allow centering */
          margin-bottom: 20px;
        }

        .footer-links {
          padding: 0;
          list-style: none;
        }

        .social-icons {
          justify-content: center; /* Specifically centers the flex icons */
        }

        .footer-col p {
          margin: 10px auto; /* Ensures paragraphs are centered if they have a max-width */
        }
      }
      


            /* --- Hero Banner with Auto-Slide --- */
      .hero-banner {
        height: 60vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
        overflow: hidden;
        /* Default background while JS loads */
        background: #222;
      }

      /* Slide background container */
      .hero-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: opacity 1.5s ease-in-out; /* Smooth fade effect */
        z-index: 0;
      }

      /* Overlay to make text readable */
      .hero-banner::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
      }

      .hero-content {
        max-width: 800px;
        padding: 0 20px;
        position: relative;
        z-index: 2;
        
      }

      .hero-banner h1 {
        font-size: 2.5rem;
        text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        margin: 0 0 10px 0;
        font-weight: 1000;
      }

      .hero-banner p {
        font-size: 1.1rem;
        margin: 0;
        text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
        opacity: 0.9;
        font-weight: 900;
      }
      .cta-group {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 20px;
      }
      .btn-main {
        background: #ff5a5f;
        color: #fff;
        padding: 20px 35px;
        border-radius: 50px;
        font-weight: bold;
        text-decoration: none;
      }
      .btn-call {
        background: #fff;
        color: #333;
        padding: 20px 35px;
        border-radius: 50px;
        font-weight: bold;
        text-decoration: none;
      }

      /* Update or Add this in your <style> tag */
      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        z-index: 10; /* Ensure arrows are above the overlay */
        padding: 20px;
        transition:
          color 0.3s,
          scale 0.2s;
      }

      .arrow:hover {
        color: #fff;
        scale: 1.1;
      }

      .arrow.left {
        left: 20px;
      }

      .arrow.right {
        right: 20px;
      }


/* Floating Buttons */
/* Floating Buttons Container */
.floating-buttons {
    position: fixed;
    right: 25px;
    bottom: 60px;
    /* Adjusted from 400px to be at the bottom corner */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Aligns all buttons to the right */
    gap: 12px;
    z-index: 1100;
}


.wa-btn {
    background: #25d366;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.call-btn {
    background: var(--primary-teal);
    border-radius: 30px;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* New Book Now Floating Button */
.book-btn {
    background: #24d0fb;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 90, 95, 0.4);
    transition: transform 0.3s;
}

.book-btn:hover {
    transform: translateY(-3px);
    background: #e34d52;
}

/* Social Buttons Hover Effect */
.wa-btn:hover,
.call-btn:hover {
    transform: translateY(-3px);
}